<template>
    <view class="home-book-list">
        <view class="book-tab">
            <text class="book-tab-item" :class="{'active': activeType===item.homeConfId}"
                  v-for="item in tabList"
                  :key="item.homeConfId"
                  @tap="tabChange(item)">
                {{item.homeConfName}}
                <text v-if="activeType===item.homeConfId" class="active-line"/>
            </text>
        </view>
       <view style="height: 1000rpx;">
           <mescroll-uni  @up="upCallback" :up="upOption"  class="mescroll-flex" :fixed="false" @init="mescrollInit">
               <view class="book-card-wrapper common-interval" v-for="item in bookList" :key="item.id">
                   <gw-book-card
                           :item="item"
                           @linkTo="linkTo"
                           @updateBooks="updateBooks"
                   />
               </view>
           </mescroll-uni>
       </view>
    </view>
</template>

<script>
    import gwBookCard from '../components/gw-book-card';
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import service from "@/service";
    import { getBooks } from '@/util/commonFn'
    export default {
        name: "bookList",
        components: {
            gwBookCard, MescrollUni
        },
        data() {
            return {
                tabList: [],
                activeType: '',
                bookList: [],
                ageRange: {
                    0: "0-2岁",
                    1: '3-5岁',
                    2: '6-8岁',
                    3: '9-12岁'
                },
                page: 1,
                limit: 5,
                nameAll: '',
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: false,
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null
            }
        },
        mounted() {
            this.getHomeConf();
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getBooks(this.activeType);
            },
            getHomeConf () {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getHomeConf({
                    data: {},
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.tabList = res.result || [];
                            this.activeType = this.tabList[0].homeConfId;
                            this.getBooks(this.tabList[0].homeConfId)
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {

                    },
                });
            },
            getBooks (homeConfId, para) {
                uni.showLoading({
                    title: '加载中',
                });
                let params = {
                    homeConfId: homeConfId,
                    page: 1,
                    limit: 10
                };
                para ? params = {...params, ...para} : null
                getBooks(params).then(result=>{
                    let data = result.data || [];
                    (this.page > 1 && !para) ? this.bookList.push(...data) : this.bookList = data;
                    this.mescroll && this.mescroll.endBySize(data.length, data.num);
                });
            },
            updateBooks(){
                this.page = 1;
                this.mescroll && this.mescroll.resetUpScroll();
                this.getBooks(this.activeType, {
                    page: 1,
                    limit: this.bookList.length
                });
            },
            tabChange(item) {
                this.activeType = item.homeConfId;
                this.page = 1;
                this.mescroll && this.mescroll.resetUpScroll();
            },
            changeRecommond() {},
            linkTo(item) {
                uni.navigateTo({
                    url: `../components/gw-book-detail?booksId=${item.booksId}`
                })
            },
        }
    }
</script>
<style lang="scss">
    .home-book-list{
        .mescroll-empty{
            padding: 0 !important;
        }
    }
</style>
<style scoped lang="scss">
    .message{
        position: fixed;
    }
    .book-tab {
        display: flex;
        justify-content: space-between;
        padding: 50rpx;
        box-sizing: border-box;
        font-size:28rpx;
        color:rgba(153,153,153,1);
        &-item{
            position: relative;
            .active-line{
                position: absolute;
                width:80%;
                height:2rpx;
                background:rgba(55,115,235,1);
                border-radius:4rpx;
                top: 50rpx;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        .active{
            font-size:32rpx;
            font-weight:bold;
            color:rgba(51,51,51,1)
        }
    }
</style>